import React, { Component, createRef } from 'react'
import { connect } from 'react-redux'  //引入连接器
import * as userActions from '../store/actions/userAction'
import { bindActionCreators } from 'redux';

class Login extends Component {
    constructor(props) {
        super(props)
        this.upRef = createRef();
    }
    // 设置token
  handleSetToken = () => {
    // this.props.userActions.getUserTokenAction("2geh21ve23r23543523451243");

    this.props.userActions
      .getUserTokenAction2("2geh21ve23r23543523451243")
      .then((res) => {
        console.log("Login->page", res);
        console.log("登录成功后要跳转到原来页面");
        const {
          history,
          location: {
            state: {
              from: { pathname },
            },
          },
        } = this.props;
        if (history && pathname) {
          history.replace(pathname);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  };
    handlePhoto = (event) => {
        const files =event.target.files[0]
        console.log(files)
    }

    render() {
        return (
            <div className="login">
                <h1>我是登录页面</h1>
                <button className="lg-btn" onClick={this.handleSetToken}>点击设置token</button>
                <div>
                    <h2>React自定义input样式以及实现上传照片功能</h2>
                    <input
                        type="file"
                        ref={this.upRef}	//挂载ref
                        accept=".jpg,.jpeg,.png"	//限制文件类型
                        hidden
                        onChange={this.handlePhoto}
                    />
                    <span
                        onClick={() => {
                            this.upRef.current.click()		//当点击a标签的时候触发事件
                        }}
                        //自己看心情改样式吧
                        style={{
                            height: '39px',
                            lineHeight: '39px',
                        }}
                    >上传照片
                </span>
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        token: state.user.token,
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        userActions: bindActionCreators(userActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)